import React, { Component } from 'react';

export default class Numclass extends Component {

  constructor(props) {
    super(props);
    this.state = {
        num: false,
    };
    this.timer
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        num: true
      })
    }, 3000)
  }

  handleBtn = () => {
    this.setState({
      num: false
    })
    setTimeout(() => {
      this.setState({
        num: true
      })
    }, 3000)
  }

  /**
   * 3、请实现一下场景
   *  分别类组件和函数组件实现：页面初始化挂载时显示文字loading，3秒后 显示 文字loaded+一个按钮，
      然后在点击按钮，页面显示文字为loading并且按钮立即消失不显示，3秒后按钮再次显示并且页面显示文字loaded
   * 
   */

  render() {
      const { num } = this.state
    return (
      <div>
          类组件：：  { !num ? 'loading' : 'loaded'}  { num && <button onClick={this.handleBtn} >按钮</button> }
      </div>
    )
  }
}